
<template>
  <div class="button-demo bg-pink ">
    <MButton  :ghost="true" size="small" type="default">small default ghost</MButton>
    <MButton  :ghost="true" size="medium" type="primary">medium primary ghost</MButton>
    <MButton  :ghost="true" size="large" type="primary">large primary ghost</MButton>
    <MButton :ghost="true" size="medium" type="text">text ghost</MButton>
    <MButton :ghost="true" size="medium" type="link">link ghost</MButton>
    <br />
    <MButton :ghost="true"  type="primary">primary</MButton>
    <MButton :ghost="true"  type="success">success</MButton>
    <MButton :ghost="true"  type="warning">warning</MButton>
    <MButton :ghost="true"  type="danger">danger</MButton>
    <MButton :ghost="true"  type="info">info</MButton>
  </div>
</template>

<script lang="ts">
import { defineComponent} from "vue";

export default defineComponent({
  components: {

  }
})
</script>
<style>
.button-demo {
  padding: 10px;
}

.button-demo .m-button {
  margin-right: 8px;
  margin-bottom: 12px;
}

.bg-pink {
  background: #666;
}
</style>